<!--
 * @Author: zcwhy 12345678
 * @Date: 2023-11-02 10:30:13
 * @LastEditors: zcwhy 12345678
 * @LastEditTime: 2023-12-19 14:18:04
 * @FilePath: \xxProject\src\views\knapsack.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
        <van-tabs v-model:active="active" @change="change">
          <van-tab v-for="(item, index) in tabList" :key="index">
            <template #title> {{ item.name }} </template>
            <van-grid>
              <van-grid-item v-for="(arr, index) in itemList" :key="index">
                <van-icon name="photo-o" size="30" />
                <span style="font-size: 12px">
                  {{ arr.name }}<span style="color: #1890ff">({{ arr.num }})</span></span
                >
              </van-grid-item>
            </van-grid>
          </van-tab>
        </van-tabs>
    </div>
    <navBarItem />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import navBarItem from '@/components/tabber.vue'
// 判断是否在微信浏览器内
import { listArticle } from '@/api/system/article.ts'
import useUserStore from '@/store/modules/user'
import { getAssetURL, equipFindOne, getRealm } from '@/utils/index.ts'
const active = ref<Number>(0)
const tabList = ref<Array>([
  {
    name: '全部'
  },
  {
    name: '装备'
  },
  {
    name: '消耗品'
  },
  {
    name: '药材'
  },
  {
    name: '材料'
  }
])
const itemList = ref<Array>([])
const params = ref<Object>({ userId: useUserStore().userId, pageNum: 0, pageSize: 999999 })
onMounted(() => {
  list()
})
const list = () => {
  listArticle(params.value).then((arr: any) => {
    itemList.value = arr.rows
  })
}
const change = (value) => {
  if (value == 0) {
    params.value.type = null
  } else {
    params.value.type = value
  }
  list()
}
</script>
<style>
</style>
